<template>
  <div class="header_top">
    <div class="side_menu" @mouseover="side_menu_mouseover" @mouseleave="side_menu_mouseleave"
         v-on:click="changeMenuStatus">
      <i id="trigger-icon" :class="icon_class"></i>
      <span id="trigger-text" class="trigger-text">菜单</span>
    </div>
    <div class="menu_split">|</div>
    <!--网站标志插槽-->
    <slot name="icon"></slot>
    <!--功能插槽-->
    <div class="functionArea">
      <slot name="functionArea"></slot>
    </div>
    <!--    登录、注册-->
    <!-- <div v-if="!loginStatus" class="login" v-on:click="login">
      <el-link href="login" :underline="false" class="loginLink">登录</el-link>
    </div>
    <div v-if="!loginStatus" class="regist" v-on:click="regist">
      <el-button type="primary">免费注册</el-button>
    </div> -->
    <!--头像-->
    <transition name="el-zoom-in-center">
      <div v-if="loginStatus" class="demo-basic--circle" id="avatar">
        <el-popover placement="bottom-end" :width="150" trigger="hover">
          <template #reference>
            <div class="block">
              <el-avatar @mouseover="circle_hoverChange" @mouseleave="circle_hoverLeave" :size="40" :src="getCircleUrl()">
              </el-avatar>
            </div>
          </template>
          <!--头像hover插槽-->
          <slot name="avatar_slot"></slot>
        </el-popover>
      </div>
    </transition>
  </div>
</template>

<script>
export default {
  name: "header_top",
  data() {
    return {
      //是否登录，false没有登录，true已登录
      loginStatus: false,
      //资源拼接前半段
      circleUrl: 'https://gitee.com/Kolvzaki/pics/raw/master/img/',
      // 初始头像资源
      circle_hover: 'avatar.jpeg',
      //菜单状态
      menuStatus:true,
      //图标动态class
      icon_class:'el-icon-s-fold'
    }
  },
  mounted() {
    var storage = localStorage.getItem("loginData");
    console.log(storage)
    if (storage) {
      let localData = JSON.parse(storage);
      console.log(localData);
      this.$store.dispatch("medicalStaff/login",localData)
      this.loginStatus = true
    }else {
      this.loginStatus = false
    }
  },

  methods: {
    /*菜单鼠标悬停样式变更*/
    side_menu_mouseover: function () {
      document.getElementById("trigger-icon").style.color = '#00a4ff';
      document.getElementById("trigger-text").style.color = '#00a4ff';
    },
    /*菜单鼠标移走样式变更*/
    side_menu_mouseleave: function () {
      document.getElementById("trigger-icon").style.color = '#f4f4f5';
      document.getElementById("trigger-text").style.color = '#f4f4f5';
    },
    // 头像鼠标悬停样式改变
    circle_hoverChange: function () {
      this.circle_hover = 'avatar.jpeg'
    },
    // 头像鼠标移走样式恢复
    circle_hoverLeave: function () {
      this.circle_hover = 'avatar.jpeg'
    },
    // 登录按钮功能
    // login: function () {
    //   this.loginStatus = true
    // },
    // 注册按钮功能
    // regist: function () {
    //   this.loginStatus = true
    // },
    // 动态获取图片地址,配合circle_*方法使用
    getCircleUrl: function () {
      return this.circleUrl + this.circle_hover
    },
    //改变菜单状态并向父组件传值
    changeMenuStatus:function (){
      if(this.icon_class === 'el-icon-s-unfold'){
        this.icon_class = 'el-icon-s-fold'
      }
      else{
        this.icon_class = 'el-icon-s-unfold'
      }
      this.menuStatus = !this.menuStatus
      this.$emit('func',this.menuStatus)
    }
  }
}

</script>

<style scoped>
.header_top {
  width: 1536px;
  height: 60px;
  background-color: #2b303b;
  display: flex;
  align-items: center;
  margin-left: -20px;
}

.side_menu {
  display: flex;
  align-items: center;
  height: 50px;
  width: 70px;
  margin-left: 15px;
  cursor: pointer;
  margin-right: 15px;
}

#trigger-icon {
  width: 30px;
  color: #f4f4f5;
}

/*#trigger-icon:hover{*/
/*  color: #00a4ff;*/
/*}*/
.trigger-text {
  color: #f4f4f5;
}

.menu_split {
  margin-right: 10px;
  color: #555962;
}

.loginLink {
  margin-left: 1120px;
  color: #f4f4f5;
  font-size:20px;
}

.loginLink:hover {
  box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.3);
  opacity: 0.9;
  color: #00a4ff;
}

.regist {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 5px;
  width: 80px;
  height: 40px;
  background-color: #00a4ff;
  margin-left: 20px;
  color: #f4f4f5;
}

.regist:hover {
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
  opacity: 0.9;
}

#avatar {
  margin-left: 1100px;
}
.functionArea{
  width: 800px;
  height: 30px;
  padding-top: 5px;
  position: absolute;
  left: 350px;
}
</style>
